<!-- 起步 -->
<template>
	<div class='container'>
		<a-layout>
			<a-layout-content class='layout-content' ref='content'>
				<a-card>
					<h1>商品详情</h1>
					<div id="box1" class="box">
						<h2>1. 创建 goodsdetail 分支</h2>
						<p>运行如下的命令，基于 master 分支在本地创建 goodsdetail 子分支，用来开发分类页面相关的功能：</p>
						<code-mirror :value="code[0]" :options="cmOptions"> </code-mirror>
					</div>
					<div class="box" id="box2">
						<h2>2. 添加商品详情页的编译模式</h2>
						<ol>
							<li>
								<p>在微信开发者工具中，点击工具栏上的编译模式下拉菜单，选择 添加编译模式 选项：</p>
								<el-image style="width: 100%;" :src="srcList[0]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
							<li>
								<p>勾选 启动页面 的路径，并填写了 启动参数 之后，点击 确定 按钮，添加详情页面的编译模式：</p>

								<el-image style="width: 100%;" :src="srcList[1]" fit="contain"
									:preview-src-list="srcList">
								</el-image>
							</li>
						</ol>
					</div>
					<div class="box" id="box3">
						<h2>3. 获取商品详情数据</h2>
						<ol>
							<li>
								<p>在 data 中定义商品详情的数据节点：</p>
								<code-mirror :value="code[1]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>在 onLoad 中获取商品的 Id，并调用请求商品详情的方法：</p>
								<code-mirror :value="code[2]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>在 methods 中声明 getGoodsDetail 方法：</p>
								<code-mirror :value="code[3]" :options="cmOptions"> </code-mirror>
							</li>
						</ol>
					</div>
					<div class="box" id="box4">
						<h2>4. 渲染商品详情页的 UI 结构</h2>
						<div class="item" id="box4-1">
							<h3>4-1. 渲染轮播图区域</h3>
							<ol>
								<li>
									<p>使用 v-for 指令，循环渲染如下的轮播图 UI 结构：</p>
									<code-mirror :value="code[4]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>美化轮播图的样式：</p>
									<code-mirror :value="code[5]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-2">
							<h3>4-2. 实现轮播图预览效果</h3>
							<ol>
								<li>
									<p>为轮播图中的 image 图片绑定 click 事件处理函数：</p>
									<code-mirror :value="code[6]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>在 methods 中定义 preview 事件处理函数：</p>
									<code-mirror :value="code[7]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-3">
							<h3>4-3. 渲染商品信息区域</h3>
							<ol>
								<li>
									<p>定义商品信息区域的 UI 结构如下：</p>
									<code-mirror :value="code[8]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>美化商品信息区域的样式：</p>
									<code-mirror :value="code[9]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-4">
							<h3>4-4. 渲染商品详情信息</h3>
							<li>
								<p>在页面结构中，使用 rich-text 组件，将带有 HTML 标签的内容，渲染为小程序的页面结构：</p>
								<code-mirror :value="code[10]" :options="cmOptions1"> </code-mirror>
							</li>
							<li>
								<p>修改 getGoodsDetail 方法，从而解决图片底部 空白间隙 的问题：</p>
								<code-mirror :value="code[11]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>解决 .webp 格式图片在 ios 设备上无法正常显示的问题：</p>
								<code-mirror :value="code[12]" :options="cmOptions"> </code-mirror>
							</li>
						</div>
						<div class="item" id="box4-5">
							<h3>4-5. 解决商品价格闪烁的问题</h3>
							<ol>
								<li>
									<p>导致问题的原因：在商品详情数据请求回来之前，data 中 goods_info 的值为 {}，因此初次渲染页面时，会导致 商品价格、商品名称 等闪烁的问题。</p>
								</li>
								<li>
									<p>解决方案：判断 goods_info.goods_name 属性的值是否存在，从而使用 v-if 指令控制页面的显示与隐藏：</p>
									<code-mirror :value="code[13]" :options="cmOptions1"> </code-mirror>
								</li>
							</ol>
						</div>							
					</div>
					<div class="box" id="box5">
						<h2>5. 渲染详情页底部的商品导航区域</h2>
						<div class="item" id="box5-1">
							<h3>5-1. 渲染商品导航区域的 UI 结构</h3>
							<div class="tip">基于 uni-ui 提供的 GoodsNav 组件来实现商品导航区域的效果</div>
							<ol>
								<li>
									<p>在 data 中，通过 options 和 buttonGroup 两个数组，来声明商品导航组件的按钮配置对象：</p>
									<code-mirror :value="code[14]" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在页面中使用 uni-goods-nav 商品导航组件：</p>
									<code-mirror :value="code[15]" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>美化商品导航组件，使之固定在页面最底部：</p>
									<code-mirror :value="code[16]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box5-2">
							<h3>5-2. 点击跳转到购物车页面</h3>
							<ol>
								<li>
									<p>点击商品导航组件左侧的按钮，会触发 uni-goods-nav 的 @click 事件处理函数，事件对象 e 中会包含当前点击的按钮相关的信息：</p>
									<code-mirror :value="code[17]" :options="cmOptions"> </code-mirror>
									<p>打印的按钮信息对象如下：</p>
									<el-image style="width: 100%;" :src="srcList[2]" fit="contain"
										:preview-src-list="srcList">
									</el-image>
								</li>
								<li>
									<p>根据 e.content.text 的值，来决定进一步的操作</p>
									<code-mirror :value="code[18]" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
					</div>
					<div id="box6" class="box">
						<h2>6. 分支的合并与提交</h2>
						<ol>
							<li>
								<p>将 goodsdetail 分支进行本地提交：</p>
								<code-mirror :value="code[19]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>将本地的 goodsdetail 分支推送到码云：</p>
								<code-mirror :value="code[20]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>将本地 goodsdetail 分支中的代码合并到 master 分支：</p>
								<code-mirror :value="code[21]" :options="cmOptions"> </code-mirror>
							</li>
							<li>
								<p>删除本地的 goodsdetail 分支：</p>
								<code-mirror :value="code[22]" :options="cmOptions"> </code-mirror>
							</li>
						</ol>
					</div>
				</a-card>
			</a-layout-content>
			<a-layout-sider class='layout-sider' width='300'>
				<a-anchor affix :getContainer='getContainer'  :wrapperStyle="{maxHeight: 'calc( 100vh - 120px)'}"	@click="handleClick">
					<a-anchor-link href="#box1" title="1. 创建 goodsdetail 分支" />
					<a-anchor-link href="#box2" title="2. 添加商品详情页的编译模式" />
					<a-anchor-link href="#box3" title="3. 获取商品详情数据" />
					<a-anchor-link href="#box4" title="4. 渲染商品详情页的 UI 结构" >
							<a-anchor-link href="#box4-1" title="4-1. 渲染轮播图区域" />
							<a-anchor-link href="#box4-2" title="4-2. 实现轮播图预览效果" />
							<a-anchor-link href="#box4-3" title="4-3. 渲染商品信息区域" />
							<a-anchor-link href="#box4-4" title="4-4. 渲染商品详情信息" />
							<a-anchor-link href="#box4-5" title="4-5. 解决商品价格闪烁的问题" />
					</a-anchor-link>
					<a-anchor-link href="#box5" title="5. 渲染详情页底部的商品导航区域" >
							<a-anchor-link href="#box5-1" title="5-1. 渲染商品导航区域的 UI 结构" />
							<a-anchor-link href="#box5-2" title="5-2. 点击跳转到购物车页面" />
					</a-anchor-link>
					<a-anchor-link href="#box6" title="6. 分支的合并与提交" />
				</a-anchor>
			</a-layout-sider>
		</a-layout>
	</div>
</template>
<script>
	import {
		shopDetail
	} from '../../util/code.js'
	import img1 from '@/assets/shopDetail1.png'
	import img2 from '@/assets/shopDetail2.png'
	import img3 from '@/assets/shopDetail3.png'
	export default {
		name: 'shopDetail',
		data() {
			return {
				srcList: [img1, img2, img3],
				cmOptions: {
					mode: "javascript",
					theme: "base16-dark",
					disabled: true
				},
				cmOptions1: {
					mode: "vue",
					theme: "base16-dark",
					disabled: true
				},
				code: shopDetail
			}
		},
		methods: {
			getContainer() {
				return this.$refs.content.$el
			},
			handleClick(e, link) {
				// 阻止点击的默认事件修改路由
				e.preventDefault();
				if (link.href) {
					let ele = document.getElementById(link.href);
					ele && ele.scrollIntoView({
						block: 'start',
						behavior: 'smooth'
					});
				}
			}
		}
	}
</script>
<style scoped>
</style>
